
<ul class="UIAPIPlugin-toc">
	<li><a href="#overview">Overview</a></li>
	<li><a href="#options">Options</a></li>
	<li><a href="#events">Events</a></li>
	<li><a href="#methods">Methods</a></li>
	<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
<h1>jQuery UI Progressbar</h1>
<div id="overview">
<h2 class="top-header">Overview</h2>
<div id="overview-main">
<p>The progress bar is designed to simply display the current %
complete for a process. The bar is coded to be flexibly sized through
CSS and will scale to fit inside it's parent container by default.</p>
<p>This is a determinate progress bar, meaning that it should only
be used in situations where the system can accurately update the current
status complete. A determinate progress bar should never fill from left
to right, then loop back to empty for a single process -- if the actual
percent complete status cannot be calculated, an indeterminate progress
bar (coming soon) or spinner animation is a better way to provide user
feedback.</p>
</div>
<div id="overview-dependencies">
<h3>Dependencies</h3>
<ul>
	<li>UI Core</li>
</ul>
</div>
<div id="overview-example">
<h3>Example</h3>
<div id="overview-example" class="example">
<ul>
	<li><a href="#demo"><span>Demo</span></a></li>
	<li><a href="#source"><span>View Source</span></a></li>
</ul>
<p>
<div id="demo" class="tabs-container" rel="100">A simple jQuery UI
Progressbar.<br />
</p>
<pre>$(&quot;#progressbar&quot;).progressbar({ value: 37 });
</pre>
<p>
</div>
<div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.progressbar.js&quot;&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
    $(&quot;#progressbar&quot;).progressbar({ value: 37 });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;progressbar&quot;&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
</div>
</p>
<p>
</div>
</div>
</div>
<div id="options">
<h2 class="top-header">Options</h2>
<ul class="options-list">

	<li class="option" id="option-value">
	<div class="option-header">
	<h3 class="option-name"><a href="#option-value">value</a></h3>
	<dl>
		<dt class="option-type-label">Type:</dt>
		<dd class="option-type">Number</dd>

		<dt class="option-default-label">Default:</dt>
		<dd class="option-default">0</dd>

	</dl>
	</div>
	<div class="option-description">
	<p>The value of the progressbar.</p>
	</div>
	<div class="option-examples">
	<h4>Code examples</h4>
	<dl class="option-examples-list">

		<dt>Initialize a progressbar with the <code>value</code> option
		specified.</dt>
		<dd><pre><code>$('.selector').progressbar({ value: 37 });</code></pre>
		</dd>


		<dt>Get or set the <code>value</code> option, after init.</dt>
		<dd><pre><code>//getter
var value = $('.selector').progressbar('option', 'value');
//setter
$('.selector').progressbar('option', 'value', 37);</code></pre></dd>

	</dl>
	</div>
	</li>

</ul>
</div>
<div id="events">
<h2 class="top-header">Events</h2>
<ul class="events-list">

	<li class="event" id="event-change">
	<div class="event-header">
	<h3 class="event-name"><a href="#event-change">change</a></h3>
	<dl>
		<dt class="event-type-label">Type:</dt>
		<dd class="event-type">progressbarchange</dd>
	</dl>
	</div>
	<div class="event-description">
	<p>This event is triggered when the value of the progressbar
	changes.</p>
	</div>
	<div class="event-examples">
	<h4>Code examples</h4>
	<dl class="event-examples-list">

		<dt>Supply a callback function to handle the <code>change</code>
		event as an init option.</dt>
		<dd><pre><code>$('.selector').progressbar({
   change: function(event, ui) { ... }
});</code></pre></dd>


		<dt>Bind to the <code>change</code> event by type: <code>progressbarchange</code>.
		</dt>
		<dd><pre><code>$('.selector').bind('progressbarchange', function(event, ui) {
  ...
});</code></pre></dd>

	</dl>
	</div>
	</li>

</ul>
</div>
<div id="methods">
<h2 class="top-header">Methods</h2>
<ul class="methods-list">

	<li class="method" id="method-destroy">
	<div class="method-header">
	<h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
	<dl>
		<dt class="method-signature-label">Signature:</dt>
		<dd class="method-signature">.progressbar( 'destroy' )</dd>
	</dl>
	</div>
	<div class="method-description">
	<p>Remove the progressbar functionality completely. This will
	return the element back to its pre-init state.</p>
	</div>
	</li>


	<li class="method" id="method-disable">
	<div class="method-header">
	<h3 class="method-name"><a href="#method-disable">disable</a></h3>
	<dl>
		<dt class="method-signature-label">Signature:</dt>
		<dd class="method-signature">.progressbar( 'disable' )</dd>
	</dl>
	</div>
	<div class="method-description">
	<p>Disable the progressbar.</p>
	</div>
	</li>


	<li class="method" id="method-enable">
	<div class="method-header">
	<h3 class="method-name"><a href="#method-enable">enable</a></h3>
	<dl>
		<dt class="method-signature-label">Signature:</dt>
		<dd class="method-signature">.progressbar( 'enable' )</dd>
	</dl>
	</div>
	<div class="method-description">
	<p>Enable the progressbar.</p>
	</div>
	</li>


	<li class="method" id="method-option">
	<div class="method-header">
	<h3 class="method-name"><a href="#method-option">option</a></h3>
	<dl>
		<dt class="method-signature-label">Signature:</dt>
		<dd class="method-signature">.progressbar( 'option' , optionName

		, <span class="optional">[</span>value<span class="optional">]
		</span> )</dd>
	</dl>
	</div>
	<div class="method-description">
	<p>Get or set any progressbar option. If no value is specified,
	will act as a getter.</p>
	</div>
	</li>


	<li class="method" id="method-value">
	<div class="method-header">
	<h3 class="method-name"><a href="#method-value">value</a></h3>
	<dl>
		<dt class="method-signature-label">Signature:</dt>
		<dd class="method-signature">.progressbar( 'value' , <span
			class="optional">[</span>value<span class="optional">] </span> )</dd>
	</dl>
	</div>
	<div class="method-description">
	<p>This method gets or sets the current value of the progressbar.</p>
	</div>
	</li>

</ul>
</div>
<div id="theming">
<h2 class="top-header">Theming</h2>
<p>The jQuery UI Progressbar plugin uses the jQuery UI CSS Framework
to style its look and feel, including colors and background textures. We
recommend using the ThemeRoller tool to create and download custom
themes that are easy to build and maintain.</p>
<p>If a deeper level of customization is needed, there are
widget-specific classes referenced within the ui.progressbar.css
stylesheet that can be modified. These classes are highlighed in bold
below.</p>

<h3>Sample markup with jQuery UI CSS Framework classes</h3>
&lt;div class=&quot;<strong>ui-progressbar </strong>ui-widget
ui-widget-content ui-corner-all&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 37%;&quot; class=&quot;<strong>ui-progressbar-value</strong>
ui-widget-header ui-corner-left&quot;&gt;&lt;/div&gt;<br />
&lt;/div&gt;
<p class="theme-note"><strong> Note: This is a sample of
markup generated by the progressbar plugin, not markup you should use to
create a progressbar. The only markup needed for that is
&lt;div&gt;&lt;/div&gt;. </strong></p>

</div>
</div>

</p>
<!-- 
Pre-expand include size: 14353 bytes
Post-expand include size: 16672 bytes
Template argument size: 7699 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3348-1!1!0!!en!2 and timestamp 20090604112221 -->
